<template>
  <view class="page">
    <view v-if="swiperImgs.length" style="position: relative">
      <swiper class="v-qm-banner" style="height:290px" :autoplay="true" circular :indicator-active-color="indicatorStyle" :data-index="currentIndex" @change="swiperChange">
        <swiper-item class="swiper-item" v-for="(item2, index2) in swiperImgs" :key="index2">
          <view catchtap="bindLink" :data-item="item2">
            <image lazy-load mode="widthFix" class="image" :src="item2.img"></image>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="container">
      <view class="header">
        <text class="title">至减美食简介</text>
        <view class="info">
          <text class="servings">1人份</text>
          <text class="flavor">香</text>
        </view>
        <view class="rating">
          <text class="rating-text">至减推荐</text>
        </view>
      </view>
      <view class="details">
        <view class="tab">
          <text class="tab-text">详情</text>
        </view>
        <view class="detail-content">
          <text class="detail-text">
            套餐内容：至减美食
            其他说明：请以门店实际提供为准。
          </text>
          <view class="ingredients">
            <text>主料：</text>
            <text>{{content}}</text>
          </view>
          <view class="portion">
            <text>份量：</text>
            <text>1人份</text>
          </view>
        </view>
      </view>
    </view>
    <uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      image: [],
      currentIndex: 0,
      swiperImgs: [],
      options: [
        { icon: 'headphones', text: '客服' },
        { icon: 'shop', text: '店铺', info: 0, infoBackgroundColor: '#007aff', infoColor: 'red' },
        { icon: 'cart', text: '购物车', info: 0 }
      ],
      buttonGroup: [
        { text: '立即购买', backgroundColor: '#ffa200', color: '#fff' }
      ],
      name: '',
      content: ''
    };
  },
  onLoad(options) {
    this.name = options.name;
    this.content = options.content;
    if (options.image) {
      this.image = Array.isArray(options.image) ? options.image : [options.image];
      this.swiperImgs = this.image.map((img, index) => ({
        index: index + 1,
        img: img
      }));
    }
  },
  methods: {
    swiperChange(current) {
      this.currentIndex = current.detail.current;
    },
    onClick(e) {
      uni.showToast({
        title: `点击${e.content.text}`,
        icon: 'none'
      });
    },
    buttonClick(e) {
      if (e.content.text === '立即购买') {
        uni.switchTab({
          url: '/pages/order/order' // 修改为你要跳转的页面路径
        });
      } else {
        this.options[2].info++;
      }
    }
  }
};
</script>

<style lang="scss">
.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.v-qm-banner {
  z-index: 999;
  background: transparent;

  .image {
    width: 100%;
  }

  .qm-banner-swiper-item {
    position: relative;
  }

  .underImg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 390rpx;
  }

  .qm-banner-swiper-item-box {
    background-size: cover;
    opacity: 0;
    transition-property: opacity;
  }
}

.qm-banner-underImg {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}

.uperUderImg {
  width: 100%;
  height: 100%;
}

.aaaa {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  transform: translate(0%, 0) translateZ(0);
  transition: 1s;
}

.container {
  background-color: white;
  padding: 16px;
  font-family: Arial, sans-serif;
  flex: 1;
  overflow-y: auto;
}

.header {
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.info {
  display: flex;
  align-items: center;
  margin-top: 4px;
}

.servings {
  font-size: 14px;
  color: #888;
  margin-right: 8px;
}

.flavor {
  font-size: 14px;
  color: #f00;
  background-color: #ffebee;
  padding: 2px 4px;
  border-radius: 4px;
}

.rating {
  margin-top: 4px;
}

.rating-text {
  font-size: 14px;
  color: #f90;
}

.sold {
  margin-top: 4px;
}

.select-spec {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.spec-button {
  background-color: #ff9900;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 16px;
}

.details {
  margin-top: 16px;
}

.tab {
  display: flex;
  border-bottom: 1px solid #eee;
}

.tab-text {
  padding: 8px 16px;
  font-size: 16px;
  color: #000;
}

.detail-content {
  padding: 16px 0;
}

.detail-text {
  font-size: 14px;
  color: #555;
}

.ingredients,
.portion {
  margin-top: 8px;
}

.ingredients text,
.portion text {
  font-size: 14px;
  color: #555;
}

uni-goods-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  z-index: 1000;
}
</style>
